<template>
<div>
  <codemirror v-model="item" :options="cmOption" class="code-mirror" @ready="onCmReady3" @focus="onCmFocus" @input="onCmCodeChange" ref="myCmGenerate"></codemirror>
</div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 我这里引入的是JS语言文件
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/yaml/yaml.js'
import './setting.js'
export default {
  components: {
    codemirror
  },
  data () {
    return {
      item: '',
      code: 'let a = 3; let b =4',
      cmOption: {
        tabSize: 4, // tab
        styleActiveLine: true, // 高亮选中行
        lineNumbers: true, // 显示行号
        styleSelectedText: true,
        line: true,
        foldGutter: true, // 块槽
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        // mode: { // 模式, 可查看 codemirror/mode 中的所有模式
        //   name: 'yaml',
        //   json: true
        // },
        mode: 'text/x-yaml',
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai', // 主题
        extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
      }
    }
  },
  methods: {
    onCmReady3 () {
      this.$refs.myCmGenerate.codemirror.setSize('100%', '500px')
      this.$refs.myCmGenerate.codemirror.setValue(this.code)
    },
    onCmFocus (instance, event) {
      console.log(instance)
      console.log(event)
    },
    onCmCodeChange (instance, obj) {
      console.log(instance)
      console.log(obj)
    }

  }
}
</script>
<style scoped lan="less">
.CodeMirror-scroll {
  overflow: scroll !important;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 0;
  height: 100%;
  outline: none;
  position: relative;
  border: 1px solid #dddddd;
  height: 500px;
}
.CodeMirror-sizer{
  height: 500px;
}
</style>
<style lang="less" scoped>
.code-mirror{
  font-size : 13px;
  line-height : 150%;
  text-align: left;
}
</style>
